::-webkit-scrollbar {
    width:10px;
    background: #ccc;
    
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
    transition:all .5s;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


body, html {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    
    font-family: "微软雅黑", "黑体", serif !important;
    /*-webkit-app-region: drag*/
}


.wnd-background-image {
    display: block;
    position:absolute;
    left:0;
    top:0;
    /*left:5px;*/
    /*top:5px;*/
    height:100%;
    width:100%;
    /*width:calc(100% - 10px);*/
    /*height:calc(100% - 10px);*/
    content: ' ';
    z-index: 0;
    border-radius: 5px;
    background: url("../../static/wndbg2.jpg");
    background-size: contain;
    opacity:0.8;
    filter: blur(1px);
}

.wnd-background-color {
    display: block;
    position:absolute;
    left:0;
    top:0;
    /*left:5px;*/
    /*top:5px;*/
    /*width:calc(100% - 10px);*/
    /*height:calc(100% - 10px);*/
    height:100%;
    width:100%;
    background:rgb(255,255,255);
    content: ' ';
    z-index: 1;
    border-radius: 5px;
    filter: blur(1px);
    opacity:0.5;
}

.content-wrap {
    left:5px;
    top:5px;
    position:relative;
    height:calc(100% - 10px);
    width:calc(100% - 10px);
    box-sizing: border-box;
    border-radius: 5px;
    /*padding:5px;*/
    z-index:10;
    box-shadow: black 0 0 4px;
    overflow: hidden;
}

.content {
    /*left:5px;*/
    /*top:5px;*/
    position:relative;
    height:100%;
    width:100%;
    box-sizing: border-box;
    padding:5px;
    z-index:10;
    display: flex;
    flex-direction: column;
}

.content .top-bar {
    display: flex;
    padding:5px 0;
}

.content .top-bar .search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex:1;
    padding: 0 20px;
    position: relative;
}

.content .top-bar .search-bar .search-count {
    background: #b9d6de;
    border-radius: 8px;
    padding: 1px 8px;
    box-sizing: border-box;
    font-size: 11px;
    right: 25px;
    position: absolute;
}

.content .top-bar .search-bar input {
    width:100%;
    border-radius: 10px;
    border: none;
    padding:6px 10px 5px 10px;
    outline: none;
    font-weight:bold;
    padding-right: 38px;
}

.content .top-bar .search-bar input:focus {
    outline: none;
}

.content .top-bar .button-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5px;
}


.content .top-bar .button-bar button.menu-button {
    color:gray;
    background: transparent;
    border:solid 1px transparent;
}

.content .top-bar .button-bar button.menu-button i {
    font-size:24px;
}

.content .top-bar .button-bar button.menu-button.actived,
.content .top-bar .button-bar button.menu-button:hover {
    border: solid 1px #aaa;
    color: #222;
    background-color: rgba(200, 200, 200, 0.5);
}

.content .content-list {
    flex:1;
    border-radius: 5px;
    background: rgba(255,255,255, 0.3);
    overflow: auto;
    padding: 10px;
    /*display: flex;*/
}

.content .content-list .item {
    padding: 5px;
    display: inline-block;
    background: rgba(200, 200, 200, 0.5);
    border-radius: 10px;
    cursor:pointer;
    transition: none;
}

.content .content-list .item.actived {
    border-color: #3679cea3;
    background-color: rgba(157, 195, 220, 0.5);
}

.content .content-list .item.actived:hover {
    border-color: #3679cea3;
    background-color: rgba(157, 195, 220, 0.5);
}

.content .content-list .item > div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content .content-list .item:hover {
    background: rgba(180, 180, 180, 0.6);
}


.content .content-list .item .icon {
    width:41px;
    height:41px;
    position:relative;
}

.content .content-list .item .icon svg,
.content .content-list .item .icon img {
    width:100%;
    height:100%;
}

.content .content-list .item .name {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:5px 2px 2px 2px;
}

.content .content-list .item .text {
    flex:1;
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.content .content-list .item .text mark {
    border-radius: 5px;
}

.content .content-list .item .running {
    width: 6px;
    height: 6px;
    background: #25be25;
    border: solid 1px #1c911c;
    border-radius: 50%;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    animation: running-blink 2.5s infinite ;
    overflow: auto;
    word-break: break-all;
}

@keyframes running-blink {
    0% {
        box-shadow: #4cdd4c 0 0 0px 0px;
        background: #25be25;
        border-color: #1c911c;
    }
    
    50% {
        box-shadow: #1d9e1d 0 0 5px 2px;
        background: #1c921c;
        border-color: #156f15;
    }
    
    100% {
        box-shadow: #4cdd4c 0 0 0px 0px;
        background: #25be25;
        border-color: #1c911c;
    }
}

.content .content-list .item .is-shortcut {
    font-size: 12px;
    padding: 0 2px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
}

.content .content-list .item .tag {
    color: black;
    background: #9ddfff;
    border-radius: 5px;
    font-size: 10px;
    margin-left: 2px;
    padding: 2px 3px;
}

.content .content-list .item .tag.desktop {
    background: #9ddfff;
}


.content .content-list .item .tag.system {
    background: #ffa2b3;
}

.content .content-list .item .tag.start-menu {
    background: #ffd6a2;
}

.content .content-list .item .tag.custom {
    background: #95ff9f;
}


.content .content-list .no-content {
    font-size:12px;
    width:100%;
    text-align: center;
    padding:10px;
    box-sizing: border-box;
}

#root {
    transition: transform .2s;
    transform: scale(0.5);
}

#root.wnd-show {
    transform: scale(1);
}

.history-bar {
    border-radius: 5px;
    background: rgba(255,255,255, 0.3);
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom:5px;
    padding: 5px;
}

.history-bar button.his-button {
    color:gray;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    background: #e0d9d9;
    margin-left: 5px;
    font-size:12px;
    white-space: nowrap;
    word-break: normal;
}

.history-bar button.his-button:hover {
    color: #6e6e6e;
    background: #c6bfbf;
}

.history-bar .button.his-button:hover {
    color: #505050;
}


.loading {
    width: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}

/*.loading.show {*/
/*    height:30px;*/
/*}*/

@keyframes rotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.loading .loading-img {
    width:20px;
    animation:rotate 1.5s infinite linear;
}

.loading .loading-text {
    padding-left:3px;
    font-size:12px;
}
